<script setup>
	import dayjs from 'dayjs'
	const props = defineProps({
		info: Object,
		type: Number,
		from: String,
	})

</script>
<template>
	<view class="message-page">
		<view
			class="message-item"
			:class="{ reverse: props.from === props.info.from }"
		>
			<image
				:src="props.info.fromAvatar"
				mode=""
				class="message-avatar"
			></image>
			<view class="message-info">
				<text class="time">{{
					dayjs(props.info.createTime).format('hh:mm:ss')
				}}</text>
				<text class="content" v-if="props.type === 1">
					{{ props.info.msg.content }}</text
				>
				<image
					v-if="props.type === 4"
					class="image"
					:src="props.info.msg.content.url"
					mode="widthFix"
				/>
			</view>
		</view>
	</view>
</template>

<style lang="scss">
	.message-page {
		.message-item {
			display: flex;
			align-self: flex-start;
			margin-top: 60rpx;
			.message-avatar {
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
			}
			.message-info {
				margin-left: 20rpx;
				display: flex;
				flex-direction: column;
				.time {
					font-size: 26rpx;
					color: #979797;
				}
				.image {
					max-width: 420rpx;
					margin-top: 10rpx;
					width: 200rpx;
					height: 200rpx;
				}
				.content {
					max-width: 420rpx;
					line-height: 1.75;
					padding: 30rpx 40rpx;
					margin-top: 16rpx;
					border-radius: 20px; /* 圆角 */
					font-size: 30rpx;
					color: #3c3e42;
					background-color: #ffffff;
					position: relative;
					&::after {
						content: '';
						position: absolute;
						top: 0;
						left: -20rpx;
						width: 26rpx;
						height: 52rpx;
						background-image: url(https://consult-patient.oss-cn-hangzhou.aliyuncs.com/static/images/im-arrow-1.png);
						background-size: contain;
					}
				}
			}
			&.reverse {
				flex-direction: row-reverse;
				align-self: flex-end;
				.message-info {
					margin-left: 0;
					margin-right: 20rpx;
					.time {
						align-self: flex-end;
					}
					.content {
						align-self: flex-end;
						background-color: #16c2a3;
						color: #fff;
						&::after {
							left: auto;
							right: -20rpx;
							background-image: url(https://consult-patient.oss-cn-hangzhou.aliyuncs.com/static/images/im-arrow-2.png);
						}
					}
				}
			}
		}
	}
</style>
